<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用局部组件 -->
        <part v-if="flag" @click="flag=!flag"></part>
    </div>
</body>

</html>
<script>
    // 组件化
    // 组件用法: 
    // 组件使用的时候, 以自定义标签的形式使用,组件名就是标签名
    // 注意: 组件名再命名时, 如果是驼峰写法, 那么在页面中使用时, 需要改成 使用连字符连接前后单词
    // 注意: 组件中的数据都是函数返回的形式, 因为函数具有局部作用域. 这样在组件嵌套嵌套使用时, 
    // 不会造成数据的污染
    // 注意: 在vue3中组件的模板结构可以不需要使用一个根标签, 但是在vue2中, 组件的模板必须有一个根标签
    // 组件的分类: 
    // 01: 局部组件  特点: 只能在当前声明该局部组件的父组件中使用
    // 02: 全局组件 特点: 可以在全局的任意组件中使用


    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count1: 0,
                flag: true
            }
        },
        //  组件
        components: {
            part: { // partChild为组件名
                template: ` <div>
                                <p>我是局部组件--{{msg}}</p>
                                <p @click='count2++'>{{count2}}</p>
                                <p>docubleCount:{{doubleCount}}</p>
                            </div>`,
                data() {
                    return {
                        msg: '我是子组件数据',
                        count2: 100,

                    }
                },
                methods: {

                },
                computed: {
                    doubleCount() {
                        console.log('this', this); // this 指向组件的实例对象
                        return this.count2 * 2
                    }
                },
                watch: {
                    count2() {
                        console.log('监听');
                    }
                },
                created() {
                    console.log(this);
                },
                beforeUnmount() {
                    console.log('beforeUnmount');
                },
                unmounted() {
                    console.log('unmounted');
                }

            }
        }

    }).mount('#app')
</script>